<template>
  <ion-page>
    <ion-tabs>
      <ion-router-outlet></ion-router-outlet>
      
      <ion-tab-bar slot="bottom">
        <ion-tab-button tab="home" href="/tabs/home">
          <ion-icon :icon="homeOutline"></ion-icon>
          <ion-label>首页</ion-label>
        </ion-tab-button>

        <!-- 租客专用发现页面 -->
        <ion-tab-button
          v-if="userStore.currentRole === 'tenant'"
          tab="discover"
          href="/tabs/discover"
        >
          <ion-icon :icon="searchOutline"></ion-icon>
          <ion-label>发现</ion-label>
        </ion-tab-button>

        <!-- 其他角色的消息页面 -->
        <ion-tab-button
          v-if="userStore.currentRole !== 'tenant'"
          tab="messages"
          href="/tabs/messages"
          class="messages-tab"
        >
          <ion-icon :icon="mailOutline"></ion-icon>
          <div class="red-dot"></div>
          <ion-label>消息</ion-label>
        </ion-tab-button>

        <ion-tab-button tab="profile" href="/tabs/profile">
          <ion-icon :icon="personOutline"></ion-icon>
          <ion-label>我的</ion-label>
        </ion-tab-button>
      </ion-tab-bar>
    </ion-tabs>
  </ion-page>
</template>

<script setup lang="ts">
import {
  IonPage,
  IonTabs,
  IonTabBar,
  IonTabButton,
  IonRouterOutlet,
  IonIcon,
  IonLabel
} from '@ionic/vue'
import {
  homeOutline,
  mailOutline,
  personOutline,
  searchOutline
} from 'ionicons/icons'
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()
</script>

<style scoped>
ion-tab-bar {
  --background: white;
  --border: 1px solid rgba(0, 0, 0, 0.1);
}

ion-tab-button {
  --color: var(--ion-color-medium);
  --color-selected: var(--ion-color-primary);
}

.messages-tab {
  position: relative;
}

.red-dot {
  position: absolute;
  top: 4px;
  right: 45px;
  width: 8px;
  height: 8px;
  background-color: #ff4444;
  border-radius: 50%;
  z-index: 10;
}
</style>
